<template>
	<view>
		<my-popup ref="modal" id="modal" :closeable="false" mode="center" :zIndex="zIndex" :closeOnClickOverlay="false">
			<view class="modal-container" :style="{width: width + 'rpx'}">
				<view class="title">{{title}}</view>
				<view class="content" v-if="content">{{content}}</view>
				<slot v-else></slot>
				<view class="btns" :class="{'flex-x-bet-y-center': showCancelButton, 'flex-x-center': !showCancelButton}">
					<view class="cancel-btn flex-xy-center" @tap="cancelFun" v-if="showCancelButton">{{cancelText}}</view>
					<view class="confirm-btn flex-xy-center" @tap="confirmFun">{{confirmText}}</view>
				</view>
			</view>
		</my-popup>
		
	</view>
</template>

<script>
	// 在需要的页面中注册当前组件，
	// this.$refs.modal.open({
	// 	content: '确定要删除？',
	// 	success: () => {
	// 		console.log('modal success')
	// 	},
	// 	cancel: () => {
	// 		console.log('modal cancel')
	// 	}
	// })
	import { login } from '@/utils/login.js'
	import colorCss from '@/uni.scss';
	export default {
		name: "Modal",
		props: {
			width: {
				default: 550
			}
		},
		data() {
			return {
				isShow: false,
				title: '',
				content: '',
				showCancelButton: true,
				confirmText: '',
				cancelText: '',
				zIndex: 10075,
				success: function(){},
				cancel: function(){},
				confirmColor: ''
			};
		},
		created(){
			this.confirmColor = colorCss.themeColor;
		},
		methods: {
			init(){
				this.title = '提示'
				this.content = ''
				this.showCancelButton = true
				this.confirmText = '确定'
				this.cancelText = '取消'
				this.zIndex = 10075
				this.success = function(){}
				this.cancel = function(){}
			},
			open(initParam = {}) {
				this.init();
				this.title = initParam.title || this.title;
				this.content = initParam.content || this.content;
				if(initParam.showCancelButton != undefined){
					this.showCancelButton = initParam.showCancelButton;
				}
				this.confirmText = initParam.confirmText || this.confirmText;
				this.cancelText = initParam.cancelText || this.cancelText;
				this.success = initParam.success || this.success;
				this.cancel = initParam.cancel || this.cancel;
				this.zIndex = initParam.zIndex || this.zIndex;
				this.$refs.modal.open()
			},
			close(){
				this.$refs.modal.close()
			},
			cancelFun() {
				this.close()
				this.cancel();
			},
			confirmFun() {
				this.close()
				this.success();
			}
		}
	}
</script>

<style lang="scss">
	.modal-container{
		width: 550rpx;
		padding: 50rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.title{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
		
		.content{
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			padding: 50rpx 20rpx;
		}
		
		.btns{
			display: flex;
			font-size: 28px;
			font-weight: bold;
			
			.cancel-btn{
				flex:1;
				height: 68rpx;
				background: #F7F8F9;
				border-radius: 34rpx;
				font-size: 28rpx;
				color: #000;
				margin-right: 30rpx;
			}
			
			.confirm-btn{
				flex:1;
				height: 68rpx;
				background: $theme-color;
				border-radius: 33rpx;
				font-size: 28rpx;
				color:#fff;
			}
		}
	}
</style>